<template>
	<div :class="{ 'avue--collapse': isCollapse }" class="avue-contail">
		<div class="avue-header">
			<!-- 顶部导航栏 -->
			<top />
		</div>

		<div class="avue-layout">
			<div class="avue-left">
				<!-- 左侧导航栏 -->
				<sidebar />
			</div>
			<div class="avue-main">
				<!-- 顶部标签卡 -->
				<tags />
				<!-- 主体视图层 -->
				<el-scrollbar class="view" style="height: 100%">
					<keep-alive>
						<router-view v-if="$route.meta.$keepAlive" class="avue-view" />
					</keep-alive>
					<router-view v-if="!$route.meta.$keepAlive" class="avue-view" />
				</el-scrollbar>
			</div>
		</div>
		<div class="avue-shade" @click="showCollapse" />
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import tags from './tags';
import top from './top/';
import sidebar from './sidebar/';
import admin from '@/util/admin';
import { getStore } from '@/util/store.js';
import * as SockJS from 'sockjs-client';
import Stomp from 'stomp-websocket';
import store from '@/store';

export default {
	name: 'Index',
	provide() {
		return {
			Index: this,
		};
	},
	components: {
		top,
		tags,
		sidebar,
	},
	data() {
		return {
			// 刷新token锁
			refreshLock: false,
			// 刷新token的时间
			refreshTime: '',
			// 计时器
			timer: '',
		};
	},
	created() {
		// 实时检测刷新token
		this.refreshToken();
	},
	destroyed() {
		clearInterval(this.refreshTime);
		clearInterval(this.timer);
		/*
		 * 默认关闭websocket，如需工作流通知，则开启
		 * this.disconnect()
		 */
	},
	mounted() {
		this.init();
		/*
		 * 默认关闭websocket，如需工作流通知，则开启
		 * this.initWebSocket()
		 */
	},
	computed: mapGetters(['userInfo', 'isLock', 'isCollapse', 'website', 'expires_in']),
	methods: {
		showCollapse() {
			this.$store.commit('SET_COLLAPSE');
		},
		openMenu(item = {}) {
			this.$store.dispatch('GetMenu', { type: true, id: item.id }).then((data) => {
				if (data.length !== 0) {
					this.$router.$avueRouter.formatRoutes(data, true);
				}
			});
		},
		// 屏幕检测
		init() {
			this.$store.commit('SET_SCREEN', admin.getScreen());
			window.onresize = () => {
				setTimeout(() => {
					this.$store.commit('SET_SCREEN', admin.getScreen());
				}, 0);
			};
		},
		// 实时检测刷新token
		refreshToken() {
			this.refreshTime = setInterval(() => {
				const token = getStore({
					name: 'access_token',
					debug: true,
				});
				if (this.validatenull(token)) {
					return;
				}
				if (this.expires_in <= 1000 && !this.refreshLock) {
					this.refreshLock = true;
					this.$store.dispatch('RefreshToken').catch(() => {
						clearInterval(this.refreshTime);
					});
					this.refreshLock = false;
				}
				this.$store.commit('SET_EXPIRES_IN', this.expires_in - 10);
			}, 10000);
		},
		initWebSocket() {
			this.connection();
			const self = this;
			// 断开重连机制,尝试发送消息,捕获异常发生时重连
			this.timer = setInterval(() => {
				try {
					self.stompClient.send('test');
				} catch (err) {
					self.connection();
				}
			}, 5000);
		},
		connection() {
			const token = store.getters.access_token;
			const TENANT_ID = getStore({ name: 'tenantId' }) ? getStore({ name: 'tenantId' }) : '1';
			const headers = {
				Authorization: 'Bearer ' + token,
			};
			// 建立连接对象
			this.socket = new SockJS('/act/ws'); // 连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
			// 获取STOMP子协议的客户端对象
			this.stompClient = Stomp.over(this.socket);
			this.stompClient.debug = null;
			// 向服务器发起websocket连接
			this.stompClient.connect(
				headers,
				() => {
					this.stompClient.subscribe('/task/' + this.userInfo.username + '-' + TENANT_ID + '/remind', (msg) => {
						// 订阅服务端提供的某个topic;
						this.$notify({
							title: '协同提醒',
							type: 'warning',
							dangerouslyUseHTMLString: true,
							message: msg.body + '任务，请及时处理',
							offset: 60,
						});
					});
				},
				(err) => {},
			);
		},
		disconnect() {
			if (this.stompClient != null) {
				this.stompClient.disconnect();
			}
		},
	},
};
</script>
<style scoped lang="scss">
// .view {
//     /deep/ .el-card__body {
//         overflow-x: auto;
//     }
// }
</style>
